Page({
    data: {
      windowWidth: wx.getSystemInfoSync().windowWidth, //单位px
      windowHeight: wx.getSystemInfoSync().windowHeight, //单位px
      imageList: ['../../static/1.jpg','../../static/2.jpg','../../static/3.jpg','../../static/4.jpg','../../static/5.jpg','../../static/6.jpg','../../static/7.jpg'], //图片数组
      imglist1:[],
      turnPage: 0,//翻转页面
      pageNumber:0,
      touch: {
        distance: 0,
        scale: 1,
        baseWidth: null,
        baseHeight: null,
        scaleWidth: null,
        scaleHeight: null
      }
    },
    onLoad(){
      // let num = document.querySelectorAll(".content")
      // console.info(num)
      let list = []
        this.data.imageList.forEach((item,index)=>{
          // console.info(item)
          list.push({url:item,zIndex:this.data.imageList.length-index})
        })
        this.setData({imglist1:list})
    },
    turnNext(){
      if(this.data.turnPage>=this.data.imageList.length-1){
        console.info('最后一页')
        return
      }
      let number = ++this.data.turnPage
      this.setData({pageNumber:number})
      console.info(number)
    },
    turnPre(){
      console.info(this.data.turnPage+'右边')
      if(this.data.turnPage==0){
        console.info('第一页')
        return
      }
      let number = --this.data.turnPage
      this.setData({pageNumber:number})
      // console.info(number+'右边')
    },
    // bindTurn(touchX) {
    //   const that = this
    //   const clientX = touchX
    //   if (clientX > that.data.windowWidth / 2) {
    //     that.turnNext()
    //   } else {
    //     that.turnPre()
    //   }
    // },
    touchStart(e) {　
      console.info(e)　
      
      if(e.touches.length == 1) {
        this.data.touchDot = e.touches[0].pageX; // 获取触摸时的原点
        return
      }
      console.log('双手指触发开始')
      // 注意touchstartCallback 真正代码的开始
      // 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug
      // 当两根手指放上去的时候，就将distance 初始化。
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      this.setData({
         'touch.distance': distance,
      })
    },
    touchMove(e){
      let touch = this.data.touch
        // 单手指缩放我们不做任何操作
        if(e.touches.length == 1) return
        console.log('双手指运动')
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        // 新的 ditance
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        let distanceDiff = distance - touch.distance;
        let newScale = touch.scale + 0.005 * distanceDiff
        // 为了防止缩放得太大，所以scale需要限制，同理最小值也是
        if(newScale >= 2) {
            newScale = 2
        }
        if(newScale <= 0.6) {
            newScale = 0.6
        }
        let scaleWidth = newScale * touch.baseWidth
        let scaleHeight = newScale * touch.baseHeight
        // 赋值 新的 => 旧的
        this.setData({
           'touch.distance': distance,
           'touch.scale': newScale,
           'touch.scaleWidth': scaleWidth,
           'touch.scaleHeight': scaleHeight,
           'touch.diff': distanceDiff
        })
    },
    touchEnd(e) {　　　　 
      var that = this;　　
      var touchMove = e.changedTouches[0].pageX;　　 
      // 向左滑动 
      if (touchMove - this.data.touchDot <= -40) {　　　　 //执行切换页面的方法
        that.turnNext() 　　　　　　
      }else{　　
          // 向右滑动 　　　　　　
        that.turnPre()　　　　
      }
      // (touchMove - this.data.touchDot >= 40)
      // else{
      //   that.bindTurn(touchMove)
      // }
    },
    bindload: function(e) {
      // bindload 这个api是组件的api类似的onload属性
      this.setData({
          'touch.baseWidth': e.detail.width,
          'touch.baseHeight': e.detail.height,
          'touch.scaleWidth': e.detail.width,
          'touch.scaleHeight': e.detail.height
      })
    }




    // touchStartHandle(e) {
    //   // 单手指缩放开始，也不做任何处理 
    //   if (e.touches.length == 1) {
    //     console.log("单滑了")
    //     return
    //   }
    //   console.log('双手指触发开始')
    //   // 注意touchstartCallback 真正代码的开始 
    //   // 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug 
    //   // 当两根手指放上去的时候，就将distance 初始化。 
    //   let xMove = e.touches[1].clientX - e.touches[0].clientX;
    //   let yMove = e.touches[1].clientY - e.touches[0].clientY;
    //   let distance = Math.sqrt(xMove * xMove + yMove * yMove);
    //   this.setData({
    //     'touch.distance': distance,
    //   })
    // },
    // touchMoveHandle(e) {
    //   let touch = this.data.touch
    //   // 单手指缩放我们不做任何操作 
    //   if (e.touches.length == 1) {
    //     console.log("单滑了");
    //     return
    //   }
    //   console.log('双手指运动开始')
    //   let xMove = e.touches[1].clientX - e.touches[0].clientX;
    //   let yMove = e.touches[1].clientY - e.touches[0].clientY;
    //   // 新的 ditance 
    //   let distance = Math.sqrt(xMove * xMove + yMove * yMove);
    //   let distanceDiff = distance - touch.distance;
    //   let newScale = touch.scale + 0.005 * distanceDiff
    //   // 为了防止缩放得太大，所以scale需要限制，同理最小值也是 
    //   if (newScale >= 2) {
    //     newScale = 2
    //   }
    //   if (newScale <= 0.6) {
    //     newScale = 0.6
    //   }
    //   let scaleWidth = newScale * touch.baseWidth
    //   let scaleHeight = newScale * touch.baseHeight
    //   // 赋值 新的 => 旧的 
    //   this.setData({
    //     'touch.distance': distance,
    //     'touch.scale': newScale,
    //     'touch.scaleWidth': scaleWidth,
    //     'touch.scaleHeight': scaleHeight,
    //     'touch.diff': distanceDiff
    //   })
    // },
    // load: function (e) {
    //   // bindload 这个api是<image>组件的api类似<img>的onload属性 
    //   this.setData({
    //     'touch.baseWidth': e.detail.width,
    //     'touch.baseHeight': e.detail.height,
    //     'touch.scaleWidth': e.detail.width,
    //     'touch.scaleHeight': e.detail.height
    //   });
    // }

  })




//   const app = getApp()

// Page({
//     data: {
//         nowPgae:1,
//         startX:0,
//         slider:false,
//         animationData:{},
//         cardInfoList: [{ name: 1}, { name: 2}, { name: 3}, { name: 4}],
//         imglist1:[]
        
//     },
//     touchstart(e){
//         this.setData({
//             startX: e.changedTouches[0].clientX,
//         })
//     },
//     touchend(e) {
//         let that=this;
//         let startX = this.data.startX;
//         let endX = e.changedTouches[0].clientX;
//         if (this.data.slider)return;

//         // 下一页(左滑距离大于30)
//         if (startX - endX > 30){
//             this.setData({
//                 slider: true
//             });
//             //尾页(当前页 等于 总页数)
//             if (this.data.nowPgae == this.data.cardInfoList.length){
//                 this.setData({
//                     slider: false
//                 });
//                 wx.showToast({title: '已经是最后一张了',icon:'none'});
//                 return;
//             };

//             //创建动画   5s将位置移动到-150%,-150%
//             let animation = wx.createAnimation({
//                 duration: 500,
//             });
//             animation.translateX('-100%').translateY('-100%').rotate(60).step();
//             this.setData({
//                 animationData: animation.export()
//             });

//             // 移动完成后
//             setTimeout(function(){
//                 var cardInfoList = that.data.cardInfoList;
//                 var slidethis = that.data.cardInfoList.shift(); //删除数组第一项
//                 that.data.cardInfoList.push(slidethis); //将第一项放到末尾
//                 //创建动画   将位置归位
//                 let animation = wx.createAnimation({
//                     duration: 0,
//                 });
//                 animation.translateX('-50%').translateY('-50%').rotate(0).step();

//                 that.setData({
//                     cardInfoList: that.data.cardInfoList,
//                     animationData: animation.export(),
//                     slider:false,
//                     nowPgae:that.data.nowPgae+1
//                 });
//             },500)
//         }

//         // 上一页
//         if (endX-startX  > 30){
//             this.setData({
//                 slider: true
//             })
//             //首页
//             if (this.data.nowPgae == 1) {
//                 this.setData({
//                     slider: false
//                 })
//                 wx.showToast({title: '已经到第一张了',icon: 'none'})
//                 return;
//             };

//             //创建动画  移动到-150%,-150%
//             let animation = wx.createAnimation({
//                 duration: 0,
//             });
//             animation.translateX('-150%').translateY('-150%').rotate(100).step();


//             var cardInfoList = that.data.cardInfoList;
           
//             var slidethis = that.data.cardInfoList.pop(); //删除数组末尾项
//             that.data.cardInfoList.unshift(slidethis);//将删除的末尾项放到第一项
//             that.setData({
//                 animationData: animation.export(),
//                 cardInfoList: that.data.cardInfoList,
//             });
            
//             setTimeout(function(){
//                 //创建动画   5s将位置移动到原位
//                 let animation2 = wx.createAnimation({
//                     duration: 500,
//                     // timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
//                 });
//                 animation2.translateX('-50%').translateY('-50%').rotate(0).step();
//                 that.setData({
//                     animationData: animation2.export()
//                 });
//                 that.setData({
//                     slider: false,
//                     nowPgae: that.data.nowPgae - 1
//                 });
//             },50)
//         }
//     },
//     onLoad: function() {
//       let list = []
//       this.data.cardInfoList.forEach((item,index)=>{
//         // console.info(item)
//         list.push({url:item.name,zIndex:this.data.cardInfoList.length-index})
//       })
//       this.setData({imglist1:list})
//     },
// })